<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>图片管理</title>
    <link rel="stylesheet" href="/static/lib/layui-v2.5.6/layui-v2.5.6/layui/css/layui.css">
    <style>
       .layui-table-cell{
            height:60px;
            line-height: 60px;
        }
        .info{
            font-size: 14px;
            color: rgb(110, 108, 108);
            line-height: 36px;
        }
        .layui-icon-search{
            font-size: 30px;
            color: #009688;
            cursor: pointer;
            margin-left: 40px;
        }
        
        .btn-box {
            position: relative;
        }
        .file-ipt {
            position: absolute;
            left: 0;
            top: 0;
            opacity: 0; 
        }

        .btn {
            width: 100px;
            height: 30px;
            background-color: skyblue;
            color: white;
            margin-right: 80px;
            border: none;
            border-radius: 10px;
        }
    </style>
</head>
<body>
    <table id="demo" lay-filter="test"></table>

    <!-- <div class="layui-upload">
        <button type="button" class="layui-btn" id="test2">多图片上传</button> 
        <blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 10px;">
          预览图：
          <div class="layui-upload-list" id="demo2"></div>
       </blockquote>
      </div> -->
    

    <script type="text/html" id="toolbarDemo">
        
        <div class="layui-inline">
            <div class="layui-input-inline" style="width: 150px;">
              <input type="text" name="picName_2" id="picName_2" placeholder="图片名称" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-inline">
            <i class="layui-icon layui-icon-search" lay-event="piclistSearch_2" title="搜索刷新"></i>
        </div>
        <div class="layui-form-item">
            <button class="layui-btn layui-btn-sm layui-btn-radius" lay-event="picAdd" style="margin-top:8px">添加商品</button>
        </div>
    </script>

    <script type="text/html" id="barDemo">
        <i class="layui-icon layui-icon-list" lay-event="picinfo" title="图片信息"></i>
        <i class="layui-icon layui-icon-edit" lay-event="picUpdate" title="信息修改"></i>
        <i class="layui-icon layui-icon-delete" lay-event="picDel" title="图片删除"></i>
    </script>

    <div id="picUpdate" style="display: none;margin-top: 30px;">
        <form class="layui-form">
            <div class="layui-form-item">
                <label class="layui-form-label">图片名称</label>
                <div class="layui-input-inline">
                    <input id="picture_name" type="text" name="picture_name" required lay-verify="required" placeholder="请输入图片名" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item btn-box" style="margin: 30px 0 0 30px;">
                <button class="btn">上传图片</button>
                <input type="file" id="imgPath" class="file-ipt">
            </div>
        </form>
    </div>
   
    <script src="/static/lib/layui-v2.5.6/layui-v2.5.6/layui/layui.js"></script>
    <script>
        
        
        
        

        layui.use(['table','laydate','form','util','upload'], function(){
            var $ = layui.jquery;
            var table = layui.table;
            var laydate =layui.laydate;
            var form = layui.form
            var util = layui.util;
            var upload = layui.upload;

            table.render({
                elem: '#demo',
                height: 'full-60',
                method: 'get',
                                //TODO:
                url: '/resource/picture/queryPictureResource', //数据接口
                page: {layout: ['prev', 'page', 'next', 'skip']}, //开启分页
                toolbar: '#toolbarDemo',
                defaultToolbar: [],
                id: 'adTest',
                cols: [[ //表头
                {type:'numbers'},
                {field: 'picture_name', title: '名称', width:'10%',},
                {field: 'create_time', title: '创建时间', templet:"<div>{{layui.util.toDateString(Number(d.create_date), 'yyyy.MM.dd HH:mm:ss')}}</div>", width:'20%'},
                {field: 'picture_url', title: '图片地址', templet:'<div>https://'+ document.domain +'{{d.picture_url}}</div>'} ,
                {field: 'picture_url', title: '图片', templet:'<div><img src="https://'+ document.domain +'{{d.picture_url}}" </div>'} ,
                {fixed: 'right', width:'7%', align:'center', toolbar: '#barDemo'}
                ]],

// + document.domain +
                parseData: function(res){ //res 即为原始返回的数据
                    return {
                    "code": res.success, //解析接口状态
                    "msg": res.message, //解析提示文本
                    "count": res.data.total, //解析数据长度
                    "data": res.data.list //解析数据列表
                    };
                },
                request: {
                    pageName: 'pageNum', //页码的参数名称，默认：page
                    limitName: 'pageSize' //每页数据量的参数名，默认：limit
                },
                response: {
                    // statusName: 'success', //规定数据状态的字段名称，默认：code
                    statusCode: true //规定成功的状态码，默认：0
                }
            });
            // var file = $("#imgPath")[0].files[0];//获取文件
            // var formData = new FormData();
            // formData.append("picture_name", 1);
            // upload.render({
            //     elem: '#test2'
            //     // ,url: 'https://httpbin.org/post' //改成您自己的上传接口
            //     ,url: '/resource/picture/addPictureResource' //改成您自己的上传接口
            //     ,multiple: true,
            //     data:{picture_name: 1}
            //     ,before: function(obj){
            //     //预读本地文件示例，不支持ie8
            //     obj.preview(function(index, file, result){
            //         $('#demo2').append('<img src="'+ result +'" alt="'+ file.name +'" class="layui-upload-img">')
            //     });
            //     }
            //     ,done: function(res){
            //     //上传完毕
            //     }
            // });
            table.on('toolbar(test)', function(obj){
                sessionStorage.setItem("picName_2_1", $("#picName_2").val());
                switch(obj.event){
                    case 'piclistSearch_2':
                    table.reload('adTest', {
                        where: { //设定异步数据接口的额外参数，任意设
                            picture_name: $("#picName_2").val(),
                        },
                        page: {
                            curr: 1 //重新从第 1 页开始
                        },
                    });
                    form.render()

                    if (sessionStorage.getItem("picName_2_1") == '') {
                        $("#picName_2").attr('value','输入图片名称')
                    }else{
                        $("#picName_2").attr('value',sessionStorage.getItem("picName_2_1"))
                    }
                    
                    break;
                    case 'picAdd':
                        $(".btn-box").css('display','block')
                        $("#imgPath").val('')
                        $("#picture_name").val('')
                        layer.open({
                            type: 1,
                            skin: 'layui-layer-rim', //加上边框
                            area: ['500px', '300px'], //宽高
                            title: '图片信息添加',
                            btn: ['添加','取消'],
                            content: $('#picUpdate'),
                            yes: function(index){
                                var file = $("#imgPath")[0].files[0];//获取文件
                                var formData = new FormData();
                                if (file == undefined) {
                                    layer.msg('选择上传图片')
                                }else {
                                    formData.append("picture", file);
                                    formData.append("picture_name", $("#picture_name").val());
                                    $.ajax({
                                        type: "post",
                                        //TODO:
                                        url: "/resource/picture/addPictureResource",
                                        data: formData,
                                        dataType: "json",
                                        processData: false,
                                        contentType: false,
                                        success: function(mag){
                                            layer.msg(mag.message)
                                            table.reload('adTest')
                                        }
                                    })
                                    layer.close(index);
                                }
                            }
                        });
                    break;
                };
            });

            table.on('tool(test)', function(obj){ //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
                var data = obj.data; //获得当前行数据
                var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
                var tr = obj.tr; //获得当前行 tr 的 DOM 对象（如果有的话）
                if(layEvent === 'picUpdate'){
                    $(".btn-box").css('display','none')
                    $("#picture_name").val('')
                    layer.open({
                        type: 1,
                        skin: 'layui-layer-rim', //加上边框
                        area: ['500px', '300px'], //宽高
                        title: '图片信息修改',
                        btn: ['修改','取消'],
                        content: $('#picUpdate'),
                        yes: function(index){
                            $.ajax({
                                type: "post",
                                //TODO:
                                url: "/resource/picture/updatePictureResource",
                                data: {picture_id: data.id,picture_name: $("#picture_name").val()},
                                dataType: "json",
                                success: function(mag){
                                    layer.msg(mag.message)
                                    table.reload('adTest')
                                }
                            })
                            layer.close(index);
                        }
                    });
                } else if(layEvent === 'picDel'){ //删除
                    layer.confirm('真的删除行么', function(index){
                        $.ajax({
                            type: "post",
                            //TODO:
                            url: "/resource/picture/deletePictureResource",
                            data: {picture_id: data.id},
                            dataType: "json",
                            success: function(mag){
                                layer.msg(mag.message)
                                if (mag.success == true) {
                                    obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
                                    table.reload('adTest')
                                    layer.close(index);
                                }
                            }
                        })
                    });
                } else if(layEvent === 'picinfo'){
                    console.log(data)
                    layer.open({
                        type: 1,
                        skin: 'layui-layer-rim', //加上边框
                        area: ['40%', '90%'], //宽高
                        content: '<div><img style="width:260px" src="https://'+ document.domain +data.picture_url+'"></div>'
                    });
                }
            });
        });
        
    </script>
</body>
</html>